<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style type="text/css">
		header {
            margin-bottom: 15px;
        }
        .aui-btn {
            margin-top: 15px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="header" style="padding-top: 20px; position: fixed;">
        <div class="aui-title">登录</div>
        <div class="aui-pull-right">
            <a class="aui-btn aui-iconfont aui-icon-refresh" href=""></a>
        </div>
    </header>
    <div id="header-bottom"></div>
    <div class="aui-text-center" id="header-logo">
        <img src="../image/login_logo.png" />
    </div>
    <div class="aui-content-padded aui-margin-b-15">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-my"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" id="username" placeholder="用户名" value="admin">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-lock"></i>
                    </div>
                    <div class="aui-list-item-input">
                        <input type="password" id="password" placeholder="密码" value="123456">
                    </div>
                </div>
            </li>
        </ul>
        <p><div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" onclick="cmdLogin();">登录</div></p>
        <p><div class="aui-btn aui-btn-block aui-btn-sm" onclick="openWin('forget_win');">忘记密码</div></p>
    </div>
    <div class="aui-text-center aui-font-size-14" style="position:fixed; bottom:10px; width:100%;">
        <a href="#" class="aui-text-info" onclick="openWin('regist_win');">注册账号</a>
        <span class="aui-text-info">&nbsp;|&nbsp;</span>
        <a href="#" class="aui-text-info" onclick="openWin('about_win');">关于我们</a>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
        //不支持沉浸式效果
        if (!api.statusBarAppearance) {
            $api.byId('header').style.paddingTop = 0;
        }
        //顶部导航栏高度抵消
        $api.byId('header-bottom').style.marginTop = $api.offset($api.byId('header')).h + 'px';

        //顶部Logo高度
        var logoHeight = (api.frameHeight / 6) + 'px';
        $api.byId('header-logo').style.height = logoHeight;
        $api.byId('header-logo').firstElementChild.style.height = logoHeight;
        
        //删除用户资料
        $api.rmStorage('user');
    }

    /** 定义提示框 */
    var toast = new auiToast();

    /** 登录 */
    function cmdLogin() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        toast.loading({
            title:"登录中",
            duration:2000
        },function(ret){
            sendPostLogin(username, password, function(ret){
                toast.hide();
                if (ret['uid'] > 0) {
                    //显示登录成功提示框
                    toast.success({
                        title: '登录成功',
                        duration:500
                    });

                    //封装用户配置
                    var user = {
                        uid: ret['uid'],
                        username: username,
                        password: password
                    };

                    //保存用户配置
                    $api.setStorage('user', user);

                    //发送登录成功事件
                    api.sendEvent({
                        name: 'xxjzLogin',
                        extra: user
                    });
                } else {
                    api.alert({
                        title: '登录失败',
                        msg: ret['uname']
                    });
                }
            });
        });
    }

    /** 发送登录命令 */
    function sendPostLogin(username, password, callback) {
        api.ajax({
            url: 'http://qxu1192050221.my3w.com/xxjzApp/index.php/Home/Login/login_api',
            method: 'post',
            data: {
                values: { 
                    username: username,
                    password: password,
                    submit: 'xxjzAUI'
                }
            }
        },function(ret, err){
            if (ret) {
                callback(ret);
                // api.alert({msg:JSON.stringify(ret['uname'])});
            } else {
                callback({
                    uid: 0,
                    uname: err['msg']+'（请联系管理员）'
                });
                // api.alert({msg:JSON.stringify(err)});
            }
        });
    }

    /** 打开指定窗体 */
    function openWin(name){
        api.openWin({
            name: ''+name+'',
            url: ''+name+'.html',
            slidBackEnabled: true,
            slidBackType: 'edge',
            animation: {
                type: 'movein',
                subtype: 'from_bottom'
            },
            delay: 100
        });
    }

</script>
</html>